/** 
  查看变更
*/
<template>
  <div class="apply-change-score-container">
    <div style="height: 40px;">
      <el-breadcrumb separator="/" class="float-left" style="padding-top: 8px;">
        <el-breadcrumb-item :to="{ path: breadcrumbInfo.path }">
          <span @click="backToMain()">{{ breadcrumbInfo.parentTitle }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('scoreMangementBase.select') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="float-right">
        <el-button type="text" @click="backToMain()">{{ $t('common.btn.back') }}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('scoreEntryMana.basicInfo') }}</div>
      <el-form :model="basicInfo" label-position="right" label-width="90px">
        <el-row>
          <!-- 姓名 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreMangementBase.studentName') + '：'" style="margin-bottom: 0">
              {{ studentInfo.name }}
            </el-form-item>
          </el-col>
          <!-- 学号 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreMangementBase.studentId') + '：'" style="margin-bottom: 0">
              {{ studentInfo.studentId }}
            </el-form-item>
          </el-col>
          <!-- 学院 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreMangementBase.college') + '：'" style="margin-bottom: 0">
              {{ studentInfo.schoolI18n }}
            </el-form-item>
          </el-col>
          <!-- 专业 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreMangementBase.profession') + '：'" style="margin-bottom: 0">
              {{ studentInfo.majorI18n }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 辅修学院 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreChangeApply.minorFaculty') + '：'" label-width="105px" style="margin-bottom: 0">
              {{ studentInfo.minorSchoolI18n }}
            </el-form-item>
          </el-col>
          <!-- 辅修专业 -->
          <el-col :span="6">
            <el-form-item :label="$t('scoreChangeApply.minorMajor') + '：'" style="margin-bottom: 0">
              {{ studentInfo.minorMajorI18n }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('scoreChangeApply.changeDetail') }}</div>
      <el-form :model="changeDialog" label-position="right" label-width="90px">
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCode') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.courseCode }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseName') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.courseName }}</td>
            </tr>
            <tr>
              <!-- <td class="text-right-background-color">{{ $t('scoreEntryMana.courseType') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.courseLabel }}</td> -->
              <td class="text-right-background-color">{{ $t('scoreChangeApply.examNature') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.scoreEaxmTypeI18n }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.semester') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.calendarYearTermCn }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.credit') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.credit }}</td>
              <td class="text-right-background-color">{{ $t('scoreChangeApply.classHours') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.periods }}</td>
            </tr>
            <!-- <tr>
              <td class="text-right-background-color">{{ $t('scoreChangeApply.examNature') }}：</td>
              <td class="text-left-background-none">{{ courseInfo.scoreEaxmTypeI18n }}</td>
              <td class="text-right-background-color"></td>
              <td class="text-left-background-none"></td>
            </tr> -->
            <tr v-for="item in courseInfo.minorScoreDetailList" :key="item.id">
              <td class="text-right-background-color">{{ $t('scoreMangementBase.original') }}{{ item.scoreTypeI18n }}：</td>
              <td class="text-left-background-none">{{ item.oldScore }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.new') }}{{ item.scoreTypeI18n }}：</td>
              <td class="text-left-background-none" style="color: red;">{{ item.scoreValue }}</td>
            </tr>
          </tbody>
        </table>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('scoreChangeApply.applyExplanation') + '：'" prop="applyExplanation">
              {{ changeDialog.applyExplanation }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="$t('scoreChangeApply.evidence') + '：'" 
              prop="evidence">
                <el-upload
                  disabled
                  v-model="changeDialog.evidence"
                  class="upload-info"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 111, 'foreignInstitutionLetter')"
                  :file-list="fileList">
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('scoreMangementBase.auditProgress') }}</div>
      <edu-table :pagination="false" :index="true" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="approvalProgressData" size="mini">
        <edu-table-column :label="$t('scoreMangementBase.time')" prop="time">
          <template slot-scope="scope">
            {{ scope.row.time | time }}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('scoreMangementBase.character')" prop="approvorName">
          <template slot-scope="scope">
            {{ scope.row.approvorName }}({{ scope.row.approvorId }})
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('scoreMangementBase.approvalDepartment')" prop="faculty"></edu-table-column>
        <edu-table-column :label="$t('scoreMangementBase.approvalResults')" prop="result">
          <template slot-scope="scope">
            {{ scope.row.result | result}}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('scoreMangementBase.approvalInstructions')" prop="content"></edu-table-column>
      </edu-table>
    </el-card>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
import * as INDEX from 'common/src/utils/index';
import UTILS from "common/src/utils/utils";
import { downloadfile } from "common/src/api/upload"
export default {
  components: {
  },
  data () {
    return {
      fileList: [],
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' },
      },
      approvalProgressData: [],
      changeDialog: {
        applyExplanation: '',
        evidence: ''
      },
      studentInfo: {
        "name": "",
        "studentId": "",
        "phoneNumber": "",
        "school": "",
        "major": "",
        "minorSchool": "",
        "minorMajor": "",
        "schoolI18n": "",
        "majorI18n": "",
        "minorSchoolI18n": "",
        "minorMajorI18n": ""
      },
      courseInfo: {},
      fileInfo: {
        upFileName: '',
        upFileKey: ''
      }
    }
    
  },
  props: {
    breadcrumbInfo: {
      type: Object,
      default: () => {}
    },
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    result(val) {
      switch(val) {
        case 'COMMIT':
          return '提交'
        case 'Process':
          return '通过'
        case 'Reject':
          return '已驳回'
        case 'Recall':
          return '撤回'
        case 'End':
          return '通过'
        case 'approveNoPass':
          return '未通过'
        default: 
          return val
      }
    },
    time(time) {
      return INDEX.parseTime(time, '{y}/{m}/{d} {h}:{i}:{s}')
    }
  },
  created() {

  },
  async mounted() {
    scoreManagementApi.selectScoreChangeApplyInfo({
      id: this.detailInfo.id,
      studentId: this.detailInfo.studentId,
      calendarId: this.detailInfo.calendarId,
      auditStatus: this.detailInfo.auditStatus
    }).then(res => {
      if (res.code === 200) {
        this.approvalProgressData = res.data.approveDetailList
        if (res.data.minorScoreChangeStudentBasicInfoVO) {
          this.studentInfo = res.data.minorScoreChangeStudentBasicInfoVO
        }
        this.courseInfo = res.data.minorScoreChangeDetailsVO
        this.changeDialog.applyExplanation = this.courseInfo.applyReason
        this.changeDialog.evidence = this.courseInfo.upFileKey
        this.fileInfo.upFileKey = this.courseInfo.upFileKey
        this.fileInfo.upFileName = this.courseInfo.upFileName
        this.fileList = [{
          url: this.fileInfo.upFileKey,
          name: this.fileInfo.upFileName,
          uid: this.fileInfo.upFileKey
        }]
        // 后续拉通流程再改
        // this.courseInfo.scoreEaxmTypeI18n = '正常'
      }
    })
  },
  methods: {
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    },
    // 文件类方法开始
    downloadMaterial(file, fileNumber, key) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    },
    // 文件类方法结束
  }
}
</script>

<style lang="scss" scoped>
  .apply-change-score-container ::v-deep {
    .title {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 18px;
    }
    .table-style-baseinfos {
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
    }
    .table-style-baseinfos .text-right-background-color {
      background-color: #edf1f5;
      text-align: right;
    }
    .text-left-background-none {
      text-align: left;
    }
    .table-style-baseinfos td {
      width: 25%;
      background-color: rgba(255, 255, 255, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #2b3b4e;
      height: 32px;
      padding: 0 10px;
    }
    .upload-info {
      .el-upload-list__item:first-child {
        margin-top: 5px;
      }
      .el-upload--text {
        display: none;
      }
    }
  }
</style>